<!--  -->
<template>
  <div class="settingBox">
    <div style="height: 60px">
      <el-button plain type="primary" style="float: left" @click="$router.back()">< 返回</el-button>
      <div style="width: 100%;text-align:center;font-weight: bold;font-size: 16px;line-height: 60px">管理员权限分配</div>
    </div>

    <div class="settingBoxContent">
      <div style="color: red;margin-bottom: 30px;margin-top: 30px;">
        管理员账号：{{adminName}}
      </div>

      <div class="setList">
        <div class="title">
          <i class="ticon el-icon-s-operation"></i>
          <span>报备审核权限分配</span>
        </div>
        <div class="selectSetBox">
          <el-transfer
            style="display: inline-block"
            v-model="userNoSelectedList"
            :props="{
                key: 'userId',
                label: 'userName'
              }"
            filterable
            filter-placeholder="请输入用户名"
            :titles="['分配的用户', '未分配用户']"
            :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"
            :data="userList">
            <p slot-scope="{ option }" style="min-width: 80px;">{{ option.userName }}</p>
          </el-transfer>
        </div>
      </div>

      <div style="width: 100%;text-align: center;">
        <div style="margin: 30px 0;">
          <el-checkbox v-model="isUserRole">用户管理权限</el-checkbox>
          <el-checkbox v-model="isAnnouncementRole">公告管理权限</el-checkbox>
          <el-checkbox v-model="isSettingRole">功能设置权限</el-checkbox>
          <el-checkbox v-model="isCertificateRole">资质证书设置权限</el-checkbox>
          <el-checkbox v-model="isOfflineRole">采购订单管理权限</el-checkbox>
<!--          <el-checkbox v-model="isRoleGroup">权限组设置权限</el-checkbox>-->
        </div>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button plain type="primary" @click="getList">重置</el-button>
      </div>

    </div>

  </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';

    export default {
        name: 'Power',
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                adminName: '',
                adminId: '',

                userList : [],
                userNoSelectedList : [],

                isAnnouncementRole : false,
                isSettingRole :false,
                isCertificateRole :false,
                isUserRole : false,
               isRoleGroup : false,
               isOfflineRole : false,

                isAdd: false, //平台是否新增
                addNewName: '',
                // 点单平台数据
                platformData: [],
                // 自营店 sku报备
                selfAdd: false, //自营店报备是否新增
                selfData: [],
                shopName: '', //选中的平台
                shopId: '' //自营店id
            }
        },
        created() {
            this.adminName = this.$route.query.name || ''
            this.adminId = parseInt(this.$route.query.id) || 0
        },
      filters:{

      },
        mounted() {
            this.getList()
        },
        //方法集合
        methods: {
            // 查询全部点单平台
            save(){
              console.log('this.userNoSelectedList' ,this.userNoSelectedList)

                //剔除
                let selectedIdList = []

                this.userList.forEach(item => {
                    if(!this.userNoSelectedList.includes(item.userId)){
                        selectedIdList.push(item.userId)
                    }
                })

                this.$axios
                    .post('/api/manage/admin/saveAdminRole' , {
                        adminId : this.adminId,
                        userIdList : selectedIdList,
                        isUserRole : this.isUserRole,
                        isAnnouncementRole : this.isAnnouncementRole,
                        isSettingRole : this.isSettingRole,
                        isCertificateRole : this.isCertificateRole,
                        isRoleGroup : this.isRoleGroup,
                        isOfflineRole : this.isOfflineRole,
                    })
                    .then(res => {
                        if (res.success) {
                            this.$message.success("修改成功")
                            this.getList()
                        }
                        else this.$message.error(res.desc)
                    });
            },
            getList() {
                this.$axios
                    .post('/api/manage/admin/getRoleUserList' , `id=${this.adminId}`)
                    .then(res => {
                        if(res.success){
                            let result = res.result
                            this.userList = result.userInfoList

                            let idList = [];
                            result.userInfoNoSelectList.forEach((item) => {
                                idList.push(item.userId)
                            })

                            this.userNoSelectedList = idList

                            this.isAnnouncementRole = result.announcementRole
                            this.isCertificateRole = result.certificateRole
                            this.isSettingRole = result.settingRole
                            this.isUserRole = result.userRole
                            this.isRoleGroup = result.roleGroup
                            this.isOfflineRole = result.offlineRole

                        }
                        else this.$message.error(res.desc)
                    })
            }

        }
    }
</script>
<style lang='less' scoped>
  //@import url(); 引入公共css类
  @themeColor:#298DF8;
  .settingBox {
    .setList {
      // width: 80%;
      // max-height: 600px;
      margin: 0 auto;
      border: 1px solid #bbb;

      .title {
        display: flex;
        align-items: center;
        padding: 16px 30px;
        font-size: 14px;
        font-weight: bold;
        background: #f3f3f3;
        border-bottom: 1px solid #bbb;

        .ticon {
          font-weight: bold;
          font-size: 16px;
          margin-right: 8px;
        }
      }

      .selectSetBox {
        width: 100%;
        display: flex;

        .newAdd {
          width: 235px;
          height: 38px;
          margin: 20px auto;
          line-height: 38px;
          background-color: rgba(255, 255, 255, 0);
          color: rgba(16, 16, 16, 1);
          // font-size: 14px;
          text-align: center;
          font-family: Roboto;
          border: 1px dotted rgba(187, 187, 187, 1);
          cursor: pointer;
        }

        .left {
          flex: 2;
          border-right: 1px solid #bbb;

          .title {
            justify-content: center;
          }

          .selectList {
            padding: 0 15%;
            max-height: 380px;
            overflow-y: auto;

            .item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10px;

              .name {
                width: 180px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .delete {
                font-size: 14px;
                color: #bbb;
                cursor: pointer;
              }
            }
          }

          .inputBox {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;

            .input {
              width: 45%;

              /deep/ .el-input__inner {
                border-color: @themeColor;
              }
            }

            span {
              margin-left: 12px;
              color: @themeColor;
              cursor: pointer;
            }
          }
        }

        .right {
          flex: 4;

          .title {
            justify-content: center;
          }

          .selfShop {
            padding: 0 10%;

            .selfSkuList {
              .item {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 15px;

                div {
                  flex: auto;
                  font-size: 14px;
                }

                .selfId {
                  text-align: center;
                }

                .delete {
                  color: #bbb;
                  text-align: center;
                  cursor: pointer;
                }
              }
            }

            .chooseBox {
              display: flex;
              align-items: center;
              margin-top: 20px;

              /deep/ .el-select,
              /deep/ .el-input {
                width: 180px;
                margin-right: 20px;
              }

              /deep/ .el-input__inner {
                border-color: @themeColor;
                color: #101010;
              }

              .selfSave,
              .selfCancel {
                font-size: 14px;
                color: @themeColor;
                margin-left: 12px;
                cursor: pointer;
              }

              .selfSave {
                margin-left: 0;
              }
            }

            .newAdd {
              width: 88%;
              margin: 20px 0;
            }
          }
        }
      }
    }
  }

  .settingBoxContent {
    width: 600px;
    margin: 0 auto;
  }
  .setList {
    /deep/ .el-transfer-panel {
      width: 251px;
    }
    /deep/ .el-transfer-panel__body {
      height: 300px;
    }
    /deep/ .el-transfer-panel__list.is-filterable {
      height: 255px;
    }
  }
</style>
